<template>
	<view class="y-flex" :class="{'mr-20': enableScroll}" :style="{
		'width': enableScroll ? pixelunit(cellScrollWidth) : 'auto'
	}" @tap="handleTap">
		<view class="y-flex y-row y-align-center">
			<com-text class="y-flex-1" size="30" :lines="cellTitleLines" :color="titleColor" :value="item.title"></com-text>
			<text v-if="item.subtitle" class="fs-24 lines-1 ml-20" :style="{color: subtextColor}">{{item.subtitle}}</text>
		</view>
		<com-text v-if="item.description" class="mt-20" size="24" :lines="cellDescriptionLines" :color="textColor" :value="item.description"></com-text>
	</view>
</template>

<script>
	export default {
		inject: ['getSkinColor', 'navigate'],
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			cellDescriptionLines () {
				return this.options.cellDescriptionLines || 3
			},
			cellScrollWidth () {
				return this.options.cellScrollWidth || 300
			},
			enableScroll () {
				return this.options.enableScroll || false
			}
		},
		methods: {
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			},
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>